<template>
    <section class="clearfix hotline">
            <div class="hotline-lr v-fl">
                <div class="hotlinebox">
                    <table class="table01">
                        <tr>
                            <th width="220">问题来源</th>
                            <td> {{detailInfo.typeName}}</td>
                        </tr>
                        <tr>
                            <th>问题类型</th>
                            <td> {{detailInfo.databus}}</td>
                        </tr>
                        <tr>
                            <th>服务类型</th>
                            <td>{{detailInfo.orderType}}</td>
                        </tr>
                        <tr>
                            <th>受理时间</th>
                            <td>{{detailInfo.acceptTime}}</td>
                        </tr>
                        <tr>
                            <th>派发时间</th>
                            <td>{{detailInfo.lastTime}}</td>
                        </tr>
                        <tr>
                            <th>当前处理</th>
                            <td>{{detailInfo.recvUnitName}}</td>
                        </tr>
                        <tr>
                            <th>承诺办结</th>
                            <td>{{detailInfo.doneTime}}</td>
                        </tr>
                    </table>
                </div>
                <div class="hotlinebox">
                    <dl>
                        <dt>所属调解委员会：<strong>{{detailInfo.spare1}}</strong></dt>
                        <dd>
                            <img style="height:150px;width: 100px;" :src="detailInfo.doneCard" onerror="this.src='http://124.225.223.110:40001/cdn/cn/hi/haikou/sfphoto/icon_zwtp.png'"/>
                            <table class="table01">
                                <tr>
                                    <th>调解员: </th>
                                    <th>{{detailInfo.dealUsername}}</th>
                                </tr>
                                <tr>
                                    <th>所属社区: </th>
                                    <th>{{detailInfo.spare2}}</th>
                                </tr>
                                <tr>
                                    <th>联系方式: </th>
                                    <th>{{detailInfo.contantTel}}</th>
                                </tr>
                            </table>
                            <div class="tcbox">
                                <a >
                                    <div class="v-icon-tc01 v-icon"></div>
                                </a>
                            </div>
                        </dd>
                    </dl>
                    <dl v-if="detailInfo.dealUsername==null">
                        <p>无调解员</p>
                    </dl>
                </div>
            </div>
       
        </div>
    </section>
</template>

<script>
    export default {
        name: 'wioc-case-hotline-detail',
		props:{
		   params: Object,
		   url:{
			   type: String		  
		   },
		   type:{
			type:String,
			default:'post'
		   }
		},
        data () {
            return {
                subTabsList:[{
                    reqStatsType:"",
                    name: '详细信息',
                    oneR:true,
                    twoR:false,
                    threeR:false,
                        },
                    {
                        reqStatsType:"",
                            name: '联动意见',
                        oneR:false,
                        twoR:true,
                        threeR:false,
                    },
                    {
                        reqStatsType:"",
                            name: '答复要点',
                        oneR:false,
                        twoR:false,
                        threeR:true,
                    }],
                currTabValue: {},
                detailInfo:{
                    //主键
                    id: '',
                    //办件编号，全省统一，作为办件的唯一标识，由业务系统按规则自动生成
                    caseCode: '',
                    //案事件代码
                    matterCode: '',
                    //事项名称，根据选中的事项自动填写。例：交通建设工程施工许可
                    matterName: '',
                    //名称，承诺件/即办件
                    typeName: '',
                    //办件所属系统来源：卓繁
                    databus: '',
                    //工单类型10行政工单20共治工单30审批工单
                    orderType: '',
                    //办件上报类型bjm不见面yc一窗
                    sendType: '',
                    //工单标记(1:前台,2:后台,3:区分中心,4:职能局)办结/处理
                    orderSymbol: '',
                    //地域名称
                    areaName: '',
                    //地域代码
                    areaCode: '',
                    //地域类型
                    areaType: '',
                    //上报时间，申请时间，时间格式：yyyy-mm-dd hh24∶mi∶ss
                    applyTime: '',
                    //申请人的名称，如为个人，则填写姓名；如为法人，则填写单位名称
                    applyMan: '',
                    //上报申请联系方式
                    applyTel: '',
                    //上报申请微信用户
                    applyWxOpenid: '',
                    //上报申请微信应用类型
                    applyWxType: '',
                    //申请证件类型，申请人提供的有效证件名称，包括身份证、组织机构代码证等
                    applyCardType: '',
                    //申请证件号码，申请人提供的有效证件的识别号。如身份证号码：330102198805059786
                    applyCardNo: '',
                    //联系人/代理人姓名
                    contantMan: '',
                    //联系人/代理人证件类型
                    contantCardType: '',
                    //联系人/代理人证件号码
                    contantCardNo: '',
                    //联系人联系电话
                    contantTel: '',
                    //邮编，申请人联系地址对应的邮政编码
                    postCode: '',
                    //通信地址，申请人的联系地址
                    location: '',
                    //坐标经度
                    mapLat: '',
                    //坐标纬度
                    mapLng: '',
                    //法人姓名，申请人是法人时需要填写
                    legalPerson: '',
                    //申请来源，标识办件的申请源头，如政务服务门户、实体政务大厅等
                    applySource: '',
                    //项目编号，有注册项目的需要填写项目编号，同国家投资项目管理监管平台中的编号保持一致。
                    projectNo: '',
                    //最后时间
                    lastTime: '',
                    //政务服务人员所在部门ID
                    recvUnitId: '',
                    //政务服务人员所在部门，进行受理操作的用户所在部门
                    recvUnitName: '',
                    //受理时间，时间格式：yyyy-mm-dd　hh24∶mi∶ss
                    acceptTime: '',
                    //政务服务人员ID
                    recvUserId: '',
                    //政务服务人员名称，登录业务系统进行受理操作的当前用户姓名
                    recvUsername: '',
                    //受理文书编号
                    acceptNo: '',
                    //办理人员姓名ID
                    dealUserId: '',
                    //办理人员人员名称
                    dealUsername: '',
                    //办结时间
                    doneTime: '',
                    //办件结果描述
                    doneResultDesc: '',
                    //结果时效,办件结果的时效
                    doneDuration: '',
                    //办结备注
                    doneRemark: '',
                    //办理结果，准予许可、不予许可、转报
                    doneResult: '',
                    //结果证照编号
                    doneCardNo: '',
                    //办件结果电子文书，证照批文信息
                    doneCard: '',
                    //提前时间
                    presetDays: '',
                    //是否预警
                    isWarning: '',
                    //是否超期
                    isOvertime: '',
                    //是否红牌
                    isRed: '',
                    //是否黄牌
                    isYellow: '',
                    //备用1
                    spare1: '',
                    //备用2
                    spare2: '',
                    caseFlowList: [{
                        //办件流程ID
                        id: '',
                        //工单编号
                        caseCode: '',
                        //流程操作渠道0默认平台
                        flowType: '',
                        //审批人ID
                        userId: '',
                        //审批人姓名
                        username: '',
                        //审批意见
                        content: '',
                        //环节开始时间
                        beginTime: '',
                        //环节结束时间
                        endTime: '',
                        //办理环节名称
                        lastState: '',
                        //下一环节名称
                        nextState: '',
                        //单位ID
                        deptId: '',
                        //单位名称
                        deptName: '',
                        //业务动作：通过、退回、其他
                        result: '',
                        //操作时间
                        createTime: '',
                        //描述
                        description: '',
                    }],
                },
            }
        },
        mounted(){
            // this.currTabValue = this.subTabsList[0]
            // this.getDetailInfo();
        },
        methods: {
            getDetailInfo(){
               this.$axios[this.type](this.url, {params:this.params})
                 .then(function (response) {
                   // handle success
               	this.detailInfo = response.detailInfo;
                 })
                 .catch(function (error) {
                   // handle error
                   console.log(error);
                 })
            },
            strSub(str){
                if(str.length>18){
                    return str.substring(0,18)+"...";
                }else{
                    return str;
                }
            },
            caseTabClick (value) {
                this.currTabValue = value;
            },
            imageUrl:function(picSrc){
                var picSrcNew = [];
                if (picSrc == null || picSrc == 'undefined') {
                    picSrcNew.push("http://124.225.223.110:40001/cdn/cn/hi/haikou/sfphoto/icon_zwtp.png");
                }else {
                    var picArr = picSrc.split(',');
                    for(let i = 0;i < picArr.length;i++){
                        if(picArr[i]!=''){
                            picSrcNew.push('http://12345show.spoc.haikou.gov.in/dapingmap/case197/getCallAttachByte?attachId=' + picArr[i])
                            return picSrcNew;
                        }
                    }
                }
                if (picSrcNew.length==0) {
                    picSrcNew.push("http://124.225.223.110:40001/cdn/cn/hi/haikou/sfphoto/icon_zwtp.png");
                }
                return picSrcNew;
            },

        },
        watch:{
            detailId(){
                this.getDetailInfo(this.detailId);
            },
        }
    }

</script>
<style lang="less">
    .hotline{
        .hotline-lr{
            .hotlinebox{
                width: 100%;
                border: 2px solid #61cfca;
                border-radius: 3px;
                background-color: rgba(97,207,202,.1);
                font-size: 16px;
				padding: 10px;
				margin-top:20px;
                .ldyj{
                    width: 80%;
                    margin: auto;
                    margin-top: 50px;
                    h1{
                        position: relative;
                        font-size: 50px;
                        &:before{
                            display: block;
                            content: '';
                            width: 30px;
                            height: 30px;
                            border-radius: 30px;
                            background-color: #76d542;
                            position: absolute;
                            left: -60px;
                            top: 20px;
                        }
                        &:after{
                            display: block;
                            content: '';
                            width: 60px;
                            height: 60px;
                            border-radius: 30px;
                            background-color: rgba(118, 213, 66,.2);
                            position: absolute;
                            left: -76px;
                            top: 5px;
                        }
                    }
                    p{
                        font-size: 50px;
                    }
                }
		    	&:nth-child(1){
					margin-top:0px
				}
            }
        }
        
    }
</style>
